<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>事件处理</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
		事件绑定注意事项：
			1.事件的回调都配置在methods对象中
			2.methods中的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
			3.methods中的配置的函数，不要用箭头函数！！！！，否则this丢失
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{school}}学习</h2>

		<!-- 绑定事件---标准方式 -->
		<button v-on:click="show1">点我提示：信息1（v-on绑定）</button> <br /><br />

		<!-- 绑定事件---简写方式 -->
		<button @click="show1">点我提示：信息1（@绑定）</button> <br /><br />

		<!-- 绑定事件---传递参数 -->
		<button @click="show2($event,666)">点我提示：信息2 + 传递的参数</button> <br /><br />

		<!-- 绑定事件---阻止默认行为，prevent叫事件修饰符 -->
		<a href="https://www.baidu.com" @click.prevent="show3">点我提示：信息3 （阻止默认行为）</a> <br /><br />

		<!-- 绑定事件---阻止冒泡，事件修饰符可以连写，且顺序可以随意改变 -->
		<div @click="show4">
			<a href="https://www.baidu.com" @click.stop.prevent="show4">点我提示：信息4 （阻止冒泡）</a>
		</div><br />

		<!-- 键盘事件 -->
		<input @keyup.enter="show5" type="text" placeholder="按下回车提示数据">
		<!-- <input @keyup.13="show5" type="text" placeholder="按下回车提示数据"> -->
		<!-- <input @keyup.37="show5" type="text" placeholder="按下左箭头提示数据"> -->
		<!-- <input @keyup.arrow-left="show5" type="text" placeholder="按下左箭头提示数据"> -->
		<!-- <input @keyup.left="show5" type="text" placeholder="按下左箭头提示数据"> -->
		<!-- <input @keyup.16="show5" type="text" placeholder="按下shift提示数据"> -->

	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: { //配置数据
				school: '尚硅谷',
			},
			methods: { //用于配置方法
				show1(event) { //此处的show1一定一定不要写成箭头函数，否则this就是Window了
					//console.log(this) //this是vm
					//console.log('信息1',event.target.innerText)
					alert('信息1')
				},
				show2(event, number) {
					console.log(event)
					alert('信息2---' + number)
				},
				show3(event) {
					//event.preventDefault(); //靠程序员手动阻止默认行为
					alert('信息3')
				},
				show4(event) {
					// event.stopPropagation(); //靠程序员手动阻止冒泡
					alert('信息4')
				},
				show5(event) {
					// if(event.keyCode !== 13) return //靠程序员自己判断按键
					// console.log(event.keyCode) //输出按键编码值
					// console.log(event.key) //输出按键名称
					alert(event.target.value)
				}
			}
		})
	</script>
</body>

</html>